/* UI组件交互模块 - 表格功能 */

/**
 * 初始化表格功能
 */
export function initTables() {
  const tables = document.querySelectorAll('.data-table');
  
  tables.forEach(table => {
    // 添加表格行悬停效果
    initTableHoverEffect(table);
    
    // 初始化表格行选择功能
    initTableSelection(table);
    
    // 初始化分页功能
    initPagination(table);
    
    // 初始化排序功能
    initTableSorting(table);
    
    // 初始化搜索功能
    initTableSearch(table);
  });
}

/**
 * 初始化表格行悬停效果
 */
function initTableHoverEffect(table) {
  const rows = table.querySelectorAll('tbody tr');
  
  rows.forEach(row => {
    row.addEventListener('mouseenter', function() {
      this.style.backgroundColor = 'var(--color-surface-light)';
      this.style.transition = 'background-color 0.2s ease';
    });
    
    row.addEventListener('mouseleave', function() {
      this.style.backgroundColor = '';
    });
  });
}

/**
 * 初始化表格行选择功能
 */
function initTableSelection(table) {
  const checkboxes = table.querySelectorAll('tbody input[type="checkbox"]');
  const selectAllCheckbox = table.querySelector('thead input[type="checkbox"]');
  
  // 单个行选择
  checkboxes.forEach(checkbox => {
    checkbox.addEventListener('change', function() {
      const row = this.closest('tr');
      if (row) {
        row.classList.toggle('selected', this.checked);
      }
    });
  });
  
  // 全选/取消全选
  if (selectAllCheckbox) {
    selectAllCheckbox.addEventListener('change', function() {
      checkboxes.forEach(checkbox => {
        checkbox.checked = this.checked;
        const row = checkbox.closest('tr');
        if (row) {
          row.classList.toggle('selected', this.checked);
        }
      });
    });
  }
}

/**
 * 初始化分页功能
 */
function initPagination(table) {
  const pagination = table.nextElementSibling;
  if (!pagination || !pagination.classList.contains('pagination')) return;
  
  const paginationLinks = pagination.querySelectorAll('a.page-link');
  
  paginationLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      
      // 如果是禁用状态，不执行操作
      if (this.parentElement.classList.contains('disabled')) {
        return;
      }
      
      // 获取页码
      const page = this.getAttribute('data-page');
      if (page) {
        // 这里可以添加实际的分页逻辑，例如发起AJAX请求
        console.log('切换到页码:', page);
        
        // 示例：更新活动状态
        paginationLinks.forEach(item => {
          item.parentElement.classList.remove('active');
        });
        this.parentElement.classList.add('active');
      }
    });
  });
}

/**
 * 初始化表格排序功能
 */
function initTableSorting(table) {
  const sortableHeaders = table.querySelectorAll('th[data-sortable="true"]');
  
  sortableHeaders.forEach(header => {
    header.classList.add('cursor-pointer');
    
    header.addEventListener('click', function() {
      // 获取当前排序方向
      const currentDirection = this.getAttribute('data-sort-direction') || 'asc';
      const newDirection = currentDirection === 'asc' ? 'desc' : 'asc';
      
      // 更新排序方向
      this.setAttribute('data-sort-direction', newDirection);
      
      // 清除其他列的排序样式
      sortableHeaders.forEach(h => {
        if (h !== this) {
          h.removeAttribute('data-sort-direction');
        }
      });
      
      // 更新排序图标
      updateSortIcon(this, newDirection);
      
      // 这里可以添加实际的排序逻辑，例如发起AJAX请求或客户端排序
      const columnName = this.getAttribute('data-column');
      console.log(`按 ${columnName} 排序，方向: ${newDirection}`);
    });
  });
}

/**
 * 更新排序图标
 */
function updateSortIcon(header, direction) {
  // 移除所有排序图标
  const existingIcons = header.querySelectorAll('.sort-icon');
  existingIcons.forEach(icon => icon.remove());
  
  // 添加新的排序图标
  const icon = document.createElement('span');
  icon.className = 'sort-icon ml-1';
  icon.textContent = direction === 'asc' ? '↑' : '↓';
  header.appendChild(icon);
}

/**
 * 初始化表格搜索功能
 */
function initTableSearch(table) {
  const tableId = table.id;
  const searchInput = document.querySelector(`input[data-table="${tableId}"]`);
  
  if (!searchInput) return;
  
  searchInput.addEventListener('input', function() {
    const searchTerm = this.value.toLowerCase();
    const rows = table.querySelectorAll('tbody tr');
    
    rows.forEach(row => {
      const rowText = row.textContent.toLowerCase();
      row.style.display = rowText.includes(searchTerm) ? '' : 'none';
    });
  });
}